"use strict";
/* Controllers */
app.controller("costTaskDetailChartController", ['$scope', '$location', '$rootScope', '$routeParams', 'costTaskDetailChartService', function ($scope, $location, $rootScope, $routeParams, costTaskDetailChartService) {

    var vm = $scope.vm = {};
    vm.p = {};

    var errorFn = function (result) {
        alert(result);
    };

    $scope.searchTaskDetailChart = function () {
        $("#refreshTable").addClass('disabled');
        var vm = $scope.vm;
        var params = {};
        params = vm.p

        var procFn = function (response) {
            var data = response.data;
            $("#refreshTable").removeClass('disabled');
            if (data == null) {
                alert("当前搜索条件，未搜索到相关数据")
                return;
            };
            initChart(data)

        };

        costTaskDetailChartService.searchTaskDetailChart(params, procFn, errorFn);
    }

    $scope.clearSearch = function () {
        var vm = $scope.vm;
        vm.p.taskId = $routeParams.taskId
    }


    function initChart(resultData) {
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        window.onresize = function () {
            myChart.resize();
        };
        var app = {};

        var mySeries = [
            {
                type: 'candlestick',
                name: resultData.taskName,
                dimensions: [
                    null,
                    { name: 'open', type: 'number', displayName: '开始时间' },
                    { name: 'close', type: 'number', displayName: '完成时间' },
                    { name: 'highest', type: 'number', displayName: '配置时间' },
                    { name: 'lowest', type: 'number', displayName: '完成时间' }
                ],
                encode: {
                    y: ['open', 'close', 'highest', 'lowest'],
                    tooltip: ['open', 'close', 'highest', 'lowest']
                },
                // data: data,
                itemStyle: {
                    color: '#ef232a',
                    color0: '#14b143',
                    borderColor: '#ef232a',
                    borderColor0: '#14b143'
                },
                emphasis: {
                    itemStyle: {
                        color: 'black',
                        color0: '#444',
                        borderColor: 'black',
                        borderColor0: '#444'
                    }
                },
                tooltip: {
                    triggerOn: 'none',
                    transitionDuration: 0,
                    confine: true,
                    borderRadius: 4,
                    borderWidth: 1,
                    borderColor: '#333',
                    backgroundColor: 'rgba(255,255,255,0.9)',
                    textStyle: {
                        fontSize: 12,
                        color: '#333'
                    },
                    valueFormatter: (value) => (Array.isArray(value) ? '' : _showTime(value))
                }
            }
        ];

        resultData.useTimes.forEach(function (e, i) {
            let serie = {
                name: '耗时' + i,
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                stack: 'one',
                emphasis: {
                    focus: 'series'
                },
                data: e,
                label: {
                    show: true,
                    formatter: function (params) {
                        return taskUseTimeFormat(params.value);
                    }
                }, tooltip: {
                    show: false
                }
            };
            mySeries.push(serie);
        });
        var option;
        option = {
            animation: false,
            title: {
                left: 'center',
                text: resultData.taskName
            },
            legend: {
                top: 30,
                data: [resultData.taskName]
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                borderWidth: 1,
                borderColor: '#ccc',
                padding: 10,
                textStyle: {
                    color: '#000'
                },
                position: function (pos, params, el, elRect, size) {
                    const obj = {
                        top: 10
                    };
                    obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                    return obj;
                }
                // extraCssText: 'width: 170px'
            },
            axisPointer: {
                link: [
                    {
                        xAxisIndex: [0, 1]
                    }
                ]
            },
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: [0, 1],
                    realtime: false,
                    start: 0,
                    end: 100,
                    top: 65,
                    height: 20
                },
                {
                    type: 'inside',
                    xAxisIndex: [0, 1],
                    start: 0,
                    end: 100,
                    top: 30,
                    height: 20
                }
            ],
            dataset: {
                source: resultData.chartData
            },
            xAxis: [
                {
                    type: 'category',
                    // boundaryGap: false,
                    axisLine: { lineStyle: { color: '#777' } },
                    axisLabel: {
                        formatter: function (value) {
                            return echarts.format.formatTime('yyyy-MM-dd', value);
                        }
                    },
                    axisPointer: {
                        show: true
                    },
                    scale: true
                },
                {
                    type: 'category',
                    gridIndex: 1,
                    // data: dates,
                    // boundaryGap: false,
                    splitLine: { show: false },
                    axisLabel: { show: false },
                    axisTick: { show: false },
                    axisLine: { lineStyle: { color: '#777' } },
                    min: 'dataMin',
                    max: 'dataMax',
                    axisPointer: {
                        type: 'shadow',
                        label: { show: false },
                        triggerTooltip: true,
                        handle: {
                            show: true,
                            margin: 30,
                            color: '#B80C00'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    scale: true,
                    // splitNumber: 2,
                    axisLine: { lineStyle: { color: '#777' } },
                    splitLine: { show: true },
                    axisTick: { show: false },
                    axisLabel: {
                        formatter: function (value, index) {
                            return _showTime(value);
                        }
                    }
                },
                {
                    // scale: true,
                    gridIndex: 1,
                    // splitNumber: 2,
                    axisLabel: { show: false },
                    axisLine: { show: false },
                    axisTick: { show: false },
                    splitLine: { show: false }
                }
            ],
            grid: [
                {
                    left: 100,
                    right: 20,
                    top: 120,
                    height: 500
                },
                {
                    left: 100,
                    right: 20,
                    height: 200,
                    top: 650
                }
            ],
            series: mySeries
        };

        var _showTime = function (second) {
            if (second < 60) {
                if (second < 10) {
                    return '00:00:0' + second;
                } else {
                    return '00:00:' + second;
                }
            } else {
                var min_total = Math.floor(second / 60); // 分钟
                var sec = Math.floor(second % 60); // 余秒
                if (min_total < 60) {
                    if (min_total < 10) {
                        if (sec < 10) {
                            return '00:0' + min_total + ':0' + sec;
                        } else {
                            return '00:0' + min_total + ':' + sec;
                        }
                    } else {
                        if (sec < 10) {
                            return '00:' + min_total + ':0' + sec;
                        } else {
                            return '00:' + min_total + ':' + sec;
                        }
                    }
                } else {
                    var hour_total = Math.floor(min_total / 60); // 小时数
                    if (hour_total < 10) {
                        hour_total = '0' + hour_total;
                    }
                    var min = Math.floor(min_total % 60); // 余分钟
                    if (min < 10) {
                        min = '0' + min;
                    }
                    if (sec < 10) {
                        sec = '0' + sec;
                    }
                    return hour_total + ':' + min + ':' + sec;
                }
            }
        };

        var taskUseTimeFormat = function (value) {
            var secondVal = value;
            if (secondVal < 1) {
                return '-';
            }
            if (secondVal < 60) {
                return secondVal.toFixed(0) + 's';
            } else if (secondVal >= 60 && secondVal < 3600) {
                return (secondVal / 60).toFixed(2) + 'min';
            } else if (secondVal >= 3600) {
                return (secondVal / 60 / 60).toFixed(2) + 'h';
            }
        };




        window.onresize = function () {
            myChart.resize();
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    }

    if ($routeParams.taskId != null) {
        vm.p.taskId = $routeParams.taskId
        $scope.searchTaskDetailChart()
    }

}]);


/* Services */
app.service('costTaskDetailChartService', ['ajaxService', function (ajaxService) {

    this.searchTaskDetailChart = function (params, successFunction, errorFunction) {
        ajaxService.AjaxPost(params, "/star/api/basic-service/v1/cost_report/loadCostTaskReportTrend.do", successFunction, errorFunction);
    };

}]);

